<template>
    <div class="login-container">
      <div class="carousel-container">
        
      </div>
      <div class="login-form">
        <div class="login-card">
          <span class="login-title">欢迎登录猫眼</span>
          <span class="login-tip">welcome 欢迎登陆</span>
          <van-form ref="user" :model="user" label-width="80px" :rules="rules">
            <van-field
              v-model="user.username"
              label="用户名"
              placeholder="请输入用户名"
              :rules="rules.username"
            ></van-field>
            <van-field
              v-model="user.password"
              label="密码"
              placeholder="请输入密码"
              type="password"
              show-password
              :rules="rules.password"
            ></van-field>
            <van-button type="primary" @click="doLogin">登录</van-button>
          </van-form>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    name: 'Login',
    data() {
      return {
        user: {
          username: 'admin',
          password: '123456',
        },
        rules: {
          username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' },
            { min: 3, max: 5, message: '用户名必须是3-10个字符', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'change' },
          ],
        },
      };
    },
    methods: {
      doLogin() {
        this.$refs.user.validate((valid) => {
          if (valid) {
            // 处理登录逻辑
            console.log('用户名:', this.user.username);
            console.log('密码:', this.user.password);
            // 进行登录成功后的操作
          } else {
            console.error('信息错误');
          }
        });
      },
    },
  };
  </script>
  
  <style scoped>
  .login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.carousel-container {
  width: 100%;
  max-height: 200px;
 
}

.my-swipe .van-swipe-item {
  color: #fff;
}

.my-swipe .van-swipe-item img {
  width: 100%;
  height:200px;
  object-fit: cover;
}

.login-form {
height:200px ;
  margin-top: 20px;
  width: 100%;
}

.login-card {
  
  padding: 50px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-title {
  font-size: 40px;
  color: #333333;
  line-height: 60px;
  letter-spacing: 1px;
  text-align: left;
}

.login-tip {
  font-size: 30px;
  color: #999999;
  line-height: 40px;
  letter-spacing: 1px;
  text-align: left;
  margin-bottom: 30px;
}

  </style>
  